// 数据渲染 
async function render(){
  try {
   const res = await axios({
     url: './student/list',
   })
   document.querySelector('tbody').innerHTML = res.data.data.map(ele => `
   <tr>
        <th scope="row">${ele.id}</th>
        <td>${ele.name}</td>
        <td>${ele.age}</td>
        <td>${ele.sex}</td>
        <td>${ele.group}</td>
        <td>${ele.phone}</td>
        <td>${ele.salary}</td>
        <td>${ele.truesalary}</td>
        <td>${ele.province + ele.city + ele.county}</td>
        <td>
          <button type="button" data-id=${ele.id} class="edit btn btn-primary btn-sm">修改</button>
          <button type="button" data-id=${ele.id} class="delete btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
   `).join('')
  console.log(res);
  } catch (err) {
   console.dir(err);
  }
 }
 render()
//  id 用于判断是否是事件委托还是点击事件
let id
// 获取省市区下拉框
const pv = document.querySelector('[name=province]')
const cy = document.querySelector('[name=city]')
const cn = document.querySelector('[name=county]')
// 初始化模态框
const modal = new bootstrap.Modal('#addModal')
// 获取添加学生信息表单
const form = document.querySelector('.add-form')
//  点击删除事件 和 点击编辑事件
const tbody = document.querySelector('tbody')
tbody.addEventListener('click', async e => {
  // 点击编辑
  if (e.target.classList.contains('edit')) {
    id = e.target.dataset.id
    // 初始化编辑模态框
    document.querySelector('.addModalLabel').innerHTML = '修改学员信息'
    form.reset()
    modal.show()   
    // 数据回显
    const res = await axios({
      url: './student/one',
      params: {
        id
      }
    })
    // 发送请求获取省市区
    const pres = await axios({url: './geo/province'})
    pv.innerHTML = '<option value="">--省份--</option>' + pres.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    const cres = await axios({url: './geo/city',params: {pname: res.data.data.province}})
    cy.innerHTML = '<option value="">--城市--</option>' + cres.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    const ares = await axios({url: './geo/county',params: {pname: res.data.data.province, cname: res.data.data.city}})
    cn.innerHTML = '<option value="">--地区--</option>' + ares.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    // 数据回显
    const k = Object.keys(res.data.data)
    k.forEach(ele => {
      const obj = document.querySelector(`[name=${ele}]`)
      // 回显判断 男 女 单选框选中
      if(ele == 'sex') {
        document.querySelectorAll('[name=sex]')[res.data.data[ele] == '男'? 0 : 1].checked = true
      } else if (obj) {
        obj.value = res.data.data[ele]
      }
    })
  }
  // 点击删除
  if (e.target.classList.contains('delete')) {
    const res = await axios({
      url: './student/delete',
      method: 'DELETE',
      params: {
        id: e.target.dataset.id
      }
    })
    Toast.success(res.data.message)
    render()
  }
})
// 点击添加学员 弹出模态框 获取省份信息
document.querySelector('.btnAddStu').addEventListener('click', async () => {
  // 初始化 id 的值
  id = ''
  // 初始化表单
  form.reset()
  document.querySelector('.addModalLabel').innerHTML = '录入新学员'
  modal.show()
  // 发送请求获取省市区
  const pres = await axios({url:'./geo/province'})
  pv.innerHTML =  '<option selected value="">--省--</option>' + pres.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
})
// 点击 省 获取 市区
pv.addEventListener('change', async () => {
  cn.innerHTML = '<option selected value="">--区/县</option>'
  cy.innerHTML = '<option selected value="">--市--</option>'
  const cres = await axios({url:'./geo/city',params:{pname:pv.value}}) 
  cy.innerHTML = '<option selected value="">--市--</option>' + cres.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
})
// 点击 市 获取 区县
cy.addEventListener('change', async () => {
  const nres = await axios({url:'./geo/county',params:{pname:pv.value,cname:cy.value}})
  cn.innerHTML = '<option selected value="">--区/县</option>' + nres.data.map(ele => `<option value="${ele}">${ele}</option>`).join('')
})
// 点击确认 添加学生信息 或 编辑学生信息
document.querySelector('.btnAddStudent').addEventListener('click', async (e) => {
  e.preventDefault()
  const data = serialize( form, { hash: true, empty: true})
  // 判断是添加模态框 还是编辑模态框
  if (id) { // 此时为 编辑模态框
    data.id = id  
    // 判断状态码为 200 且 code 为 0  添加信息成功
    try {
      const res = await axios({url:'./student/update',method:'PUT',data})
      if (res.status == 200 && res.data.code ==0) {
        Toast.success(res.data.message)
        modal.hide()
        render()
        form.reset()
      }
    } catch (err) {
      Toast.fail(err.response.data.message)
    }
  } else { // 此时为 新建模态框
    // 表单校验
    try {
    const res = await axios({url:'./student/add',method:'POST',data})
    console.log(res);
    // 判断状态码为 200 且 code 为 0  添加信息成功
    if (res.status == 200 && res.data.code ==0) {
      Toast.success(res.data.message)
      modal.hide()
      render()
      form.reset()
    }
    } catch (err) {
      Toast.fail(err.response.data.message)
    }
  }
})
// 点击重置 重置表单
document.querySelector('.btn-secondary').addEventListener('click', () => {
  cn.innerHTML = '<option selected value="">--区/县</option>'
  cy.innerHTML = '<option selected value="">--市--</option>'
  form.reset()
})
